<script lang="ts" setup>
import { ref } from 'vue';
import type { FormInstance } from '@arco-design/web-vue/es/form';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';
import { useTypeList, TYPE_LINK, TYPE_TAG, TYPE_COLUMN, TYPE_PARENT } from './use';

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
  parentId: {
    type: String,
    default: '',
  },
});

const formData = ref({
  barNameEn: '',
  barName: '',
  jumpUrl: '',
  sort: 0,
  barType: 1,
  columnId: '',
  labelId: '',
  children: [],
});
const formRef = ref<FormInstance>();
const { success } = useNotification();
const { t } = useI18n();
const typeList = useTypeList();
const tagList = ref<Record<string, any>[]>([]);
const columnList = ref<Record<string, any>[]>([]);

const getDetail = async () => {
  const { isSuccess, data } = await $fetch('/admin/toolbar/getToolbarById', {
    data: {
      barId: props.id,
    },
  });

  if (isSuccess) {
    formData.value = {
      barName: data.barName,
      barNameEn: data.barNameEn,
      jumpUrl: data.jumpUrl,
      sort: data.sort,
      barType: data.barType,
      columnId: data.columnId,
      labelId: data.labelId,
      children: data.children,
    };
  }
}

const getTagList = async () => {
  const { isSuccess, data } = await $fetch('/admin/label/list');

  if (isSuccess) {
    tagList.value = data || [];
  }
}

const getColumnList = async () => {
  const { isSuccess, data } = await $fetch('/admin/atomgitPopSpecialColumn/list');

  if (isSuccess) {
    columnList.value = data || [];
  }
}

const init = () => {
  getTagList();
  getColumnList();

  if (props.id) {
    getDetail();
  }
}

init();

const dialogClickButton = async (button: string) => {
  if (button !== 'ok') {
    return;
  }

  const res = await formRef.value?.validate();

  if (res) {
    return false;
  }

  const params = {
    barId: props.id,
    parentBarId: props.parentId,
    level: props.parentId ? 2 : 1,
    ...formData.value,
  };

  if (formData.value.barType != TYPE_PARENT) {
    params.children = [];
  }

  const { isSuccess } = await $fetch(props.id ? '/admin/toolbar/updateToolbar' : '/admin/toolbar/addToolbar', {
    method: 'post',
    data: params,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
  }

  return isSuccess;
}

defineExpose({
  dialogClickButton,
});
</script>

<template>
  <AForm ref="formRef" auto-label-width scroll-to-first-error :model="formData">
    <AFormItem :label="$t('settings.view.toolbar.index.column1')" field="barName" :rules="[{ required: true, message: $t('settings.notification.required') }, { maxLength: 150 }]">
      <AInput v-model="formData.barName" :max-length="150" allow-clear show-word-limit />
    </AFormItem>

    <AFormItem :label="$t('settings.view.toolbar.index.column5')" field="barNameEn" :rules="[ { maxLength: 150 }]">
      <AInput v-model="formData.barNameEn" :max-length="150" allow-clear show-word-limit />
    </AFormItem>

    <AFormItem :label="$t('settings.view.toolbar.index.column6')" field="barType" :rules="[{ required: true, message: $t('settings.notification.requiredSelect') }]">
      <ASelect v-model="formData.barType" :fallback-option="false">
        <template v-for="(item, key) in typeList" :key="key">
          <AOption :value="Number(key)" v-if="key != TYPE_PARENT || !props.parentId">
            {{ item }}
          </AOption>
        </template>
      </ASelect>
    </AFormItem>

    <template v-if="formData.barType == TYPE_LINK">
      <AFormItem :label="$t('settings.view.toolbar.index.column2')" field="jumpUrl" :rules="[{ required: true, message: $t('settings.notification.required') }, { maxLength: 150 }]">
        <AInput v-model.trim="formData.jumpUrl" :max-length="150" allow-clear show-word-limit />
      </AFormItem>
    </template>
    <template v-else-if="formData.barType == TYPE_TAG">
      <AFormItem :label="$t('settings.view.toolbar.index.type2')" field="labelId" :rules="[{ required: true, message: $t('settings.notification.requiredSelect') }]">
        <ASelect v-model="formData.labelId" :fallback-option="false" allow-search>
          <AOption v-for="item in tagList" :key="item.labelId" :value="item.labelId">{{ item.labelName }}</AOption>
        </ASelect>
      </AFormItem>
    </template>
    <template v-else-if="formData.barType == TYPE_COLUMN">
      <AFormItem :label="$t('settings.view.toolbar.index.type3')" field="columnId" :rules="[{ required: true, message: $t('settings.notification.requiredSelect') }]">
        <ASelect v-model="formData.columnId" :fallback-option="false" allow-search>
          <AOption v-for="item in columnList" :key="item.columnId" :value="item.columnId">{{ item.columnName }}</AOption>
        </ASelect>
      </AFormItem>
    </template>

    <AFormItem :label="$t('settings.view.toolbar.index.column3')" field="sort" :rules="[{ required: true, message: $t('settings.notification.required') }]">
      <AInputNumber v-model="formData.sort" :default-value="0" allow-clear show-word-limit mode="button" />
    </AFormItem>
  </AForm>
</template>

<style lang="scss" scoped>
</style>
